<template>
  <view class="container">
    <scroll-view scroll-y class="page-scroll" refresher-enabled @refresherrefresh="onRefresh">
      <!-- 头部搜索区域 -->
      <view class="header">
        <view class="location" @tap="changeLocation">
          <image src="/static/images/icons/location.png" class="location-icon"></image>
          <text>青岛市</text>
          <text class="arrow">▼</text>
        </view>
        <view class="search-bar" @tap="goToSearch">
          <view class="search-input">
            <image src="/static/images/icons/search.png" class="search-icon"></image>
            <text class="placeholder">搜索服务</text>
          </view>
        </view>
      </view>

      <!-- 轮播图区域 -->
      <view class="banner-container">
        <swiper class="banner"
                indicator-dots
                indicator-color="rgba(255, 255, 255, 0.6)"
                indicator-active-color="#ff552e"
                autoplay
                interval="3000"
                duration="500"
                circular>
          <swiper-item v-for="(item, index) in bannerList" :key="index" class="swiper-item">
            <image :src="item.image" mode="aspectFill" class="banner-image"></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 主要服务分类 -->
      <view class="services-container main-services" v-if="mainServices.length">
        <view class="service-item"
              v-for="(item, index) in mainServices"
              :key="index"
              @tap="handleServiceTap(item)"
              :style="{ animationDelay: index * 0.05 + 's' }">
          <view class="icon-wrapper">
            <image :src="item.icon" ></image>
          </view>
          <text>{{item.name}}</text>
        </view>
      </view>

      <!-- 次要服务分类 -->
      <view class="services-container sub-services" v-if="subServices.length">
        <view class="service-item"
              v-for="(item, index) in subServices"
              :key="index"
              @tap="handleServiceTap(item)"
              :style="{ animationDelay: index * 0.05 + 's' }">
          <view class="icon-wrapper">
            <image :src="item.icon" ></image>
          </view>
          <text>{{item.name}}</text>
        </view>
      </view>

      <!-- 推荐服务商 -->
      <view class="recommend-section">
        <u-tabs
            :list="recommendTabs"
            :current="currentRecommendTab"
            @change="switchRecommendTab"
            :is-scroll="false"
            :show-bar="true"
            inactive-color="#666666"
            active-color="#1296db"
            bar-width="60"
            item-width="150"
            :height="80"
        ></u-tabs>

        <!-- 房源推荐 -->
        <view class="tab-content" v-if="currentRecommendTab === 0">
          <view class="house-list">
            <view class="notice-bar">近一周新上热推房源，抢先看</view>
            <view class="house-item" v-for="(item, index) in houseList" :key="index" @tap="viewHouseDetail(item)">
              <view class="house-image-wrapper">
                <image :src="item.coverImage" mode="aspectFill" class="house-image"></image>
                <view class="location-tag">
                  <image src="/static/images/icons/location-white.png" class="location-icon"></image>
                  <text>{{item.district}} {{item.community}}</text>
                </view>
              </view>
              <view class="house-info">
                <view class="tag-row">
                  <text class="hot-tag">{{item.tagType}}</text>
                  <text class="title">{{item.title}}</text>
                </view>
                <view class="house-attrs">
                  <text>{{item.layout}} · {{item.area}}m² · {{item.direction}}</text>
                </view>
                <view class="price-row">
                  <view class="total-price">
                    <text class="number">{{item.totalPrice}}</text>
                    <text class="unit">万</text>
                  </view>
                  <text class="unit-price">{{item.unitPrice}}元/m²</text>
                </view>
                <view class="tags">
                  <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
                </view>
                <view class="rank-info" v-if="item.rankInfo">{{item.rankInfo}}</view>
              </view>
            </view>
          </view>
        </view>

        <!-- 写字楼推荐 -->
        <view class="tab-content" v-if="currentRecommendTab === 1">
          <view class="office-list">
            <view class="office-item"
                  v-for="(item, index) in officeList"
                  :key="index"
                  @tap="viewOfficeDetail(item)">
              <image :src="item.coverImage" mode="aspectFill" class="office-image"></image>
              <view class="office-info">
                <text class="title">{{item.title}}</text>
                <view class="office-tags">
                  <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
                </view>
                <view class="office-attrs">
                  <text class="attr">{{item.area}}m² </text>
                  <text class="attr">{{item.floor}}层 </text>
                  <text class="attr">{{item.decoration}}</text>
                </view>
                <view class="location-info">
                  <image src="/static/images/icons/location.png" class="location-icon"></image>
                  <text class="location-text">{{item.district}} · {{item.building}}</text>
                </view>
                <view class="price-info">
                  <view class="price">
                    <text class="number">{{item.price}}</text>
                    <text class="unit">元/m²·天</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 租赁车辆 -->
        <view class="tab-content" v-if="currentRecommendTab === 2">
          <view class="car-list">
            <view class="car-item"
                  v-for="(item, index) in carList"
                  :key="index"
                  @tap="viewCarDetail(item)">
              <image :src="item.coverImage" mode="aspectFill" class="car-image"></image>
              <view class="car-info">
                <text class="title">{{item.brand}} {{item.model}}</text>
                <view class="car-tags">
                  <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
                </view>
                <view class="car-attrs">
                  <text class="attr">{{item.year}}年 </text>
                  <text class="attr">{{item.mileage}}万公里 </text>
                  <text class="attr">{{item.transmission}}</text>
                </view>
                <view class="price-info">
                  <view class="price">
                    <text class="number">{{item.price}}</text>
                    <text class="unit">元/天</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 家具推荐 -->
        <view class="tab-content" v-if="currentRecommendTab === 3">
          <view class="furniture-list">
            <view class="furniture-item"
                  v-for="(item, index) in furnitureList"
                  :key="index"
                  @tap="viewFurnitureDetail(item)">
              <image :src="item.coverImage" mode="aspectFill" class="furniture-image"></image>
              <view class="furniture-info">
                <text class="title">{{item.name}}</text>
                <view class="furniture-tags">
                  <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
                </view>
                <text class="description">{{item.description}}</text>
                <view class="price-info">
                  <view class="price">
                    <text class="number">{{item.price}}</text>
                    <text class="unit">元起</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 办公设备 -->
        <view class="tab-content" v-if="currentRecommendTab === 4">
          <view class="equipment-list">
            <view class="equipment-item"
                  v-for="(item, index) in equipmentList"
                  :key="index"
                  @tap="viewEquipmentDetail(item)">
              <image :src="item.coverImage" mode="aspectFill" class="equipment-image"></image>
              <view class="equipment-info">
                <text class="title">{{item.name}}</text>
                <view class="equipment-tags">
                  <text class="tag" v-for="(tag, idx) in item.tags" :key="idx">{{tag}}</text>
                </view>
                <text class="brand">{{item.brand}}</text>
                <text class="description">{{item.description}}</text>
                <view class="price-info">
                  <view class="price">
                    <text class="number">{{item.price}}</text>
                    <text class="unit">元/月</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

    </scroll-view>
    <Tabbar />
  </view>
</template>

<script>
import Tabbar from "../../components/Tabbar.vue";

export default {
  components: {Tabbar},
  data() {
    return {
      bannerList: [
      ],
      mainServices: [
      ],
      subServices: [
      ],
      currentRecommendTab: 0,
      recommendTabs: [
        { name: '房源' },
        { name: '写字楼' },
        { name: '租车' },
        { name: '家具' },
        { name: '办公设备' }
      ],
      houseList: [
        {
          id: 1,
          coverImage: 'https://pic4.ajkimg.com/display/ajk/8b63bf460ee3c472b47461a40ceba80c/195x110c.jpg',
          district: '太湖新城',
          community: '枫丹壹号',
          tagType: '人气好房',
          title: '苏州湾吾悦广场 万象汇品质洋房社区 精装四房',
          layout: '4室2厅2卫',
          area: '125.59',
          direction: '南北',
          totalPrice: '255',
          unitPrice: '20304',
          tags: ['近地铁', '绿化率高'],
          rankInfo: '入围太湖新城热门推荐榜第33名'
        },
        {
          id: 2,
          coverImage: 'https://pic4.ajkimg.com/display/ajk/926f5c95ba0e02d14b6e35e21c9496fa/195x110c.jpg',
          district: '黎里',
          community: '南湖景苑',
          tagType: '人气好房',
          title: '送车位 大两房 朝南 密度低 满二 房龄新',
          layout: '2室1厅2卫',
          area: '97.45',
          direction: '南',
          totalPrice: '85',
          unitPrice: '8722',
          tags: ['交易保障', '满五年', '车位充足'],
          rankInfo: '入围吴江区热门推荐榜第6名'
        },
      ],
      officeList: [
      ],
      carList: [

      ],
      furnitureList: [
      ],
      equipmentList: [

      ],
    }
  },
  methods: {
    changeLocation() {
      uni.navigateTo({ url: '/pages/city/index' })
    },
    goToSearch() {
      uni.navigateTo({ url: '/pages/search/index' })
    },
    handleServiceTap(service) {
      uni.navigateTo({ url: `/pages/service/list?id=${service.id}&name=${service.name}` })
    },
    viewProviderDetail(provider) {
      uni.navigateTo({ url: `/pages/provider/detail?id=${provider.id}` })
    },
    switchRecommendTab(index) {
      this.currentRecommendTab = index
    },
    viewHouseDetail(item) {
      uni.navigateTo({ url: `/pages/house/detail?id=${item.id}` })
    },
    viewOfficeDetail(item) {
      uni.navigateTo({ url: `/pages/office/detail?id=${item.id}` })
    },
    viewCarDetail(item) {
      uni.navigateTo({ url: `/pages/car/detail?id=${item.id}` })
    },
    viewFurnitureDetail(item) {
      uni.navigateTo({ url: `/pages/furniture/detail?id=${item.id}` })
    },
    viewEquipmentDetail(item) {
      uni.navigateTo({ url: `/pages/equipment/detail?id=${item.id}` })
    },
  },
  onLoad() {
    this.$api.getWxMenuList().then(res => {
      this.mainServices = res.filter(item => item.main === 1)
      this.subServices = res.filter(item => item.main === 0)
    })
    this.$api.getWxBannerList().then(res => {
      this.bannerList = res
    })
  },
  // 下拉刷新结束
  onPullDownRefresh() {
    uni.stopPullDownRefresh()
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.page-scroll {
  flex: 1;
  height: 0;
}

// 主题色变量
$primary-color: #1296db;
$primary-light: rgba(0, 209, 178, 0.1);
$text-color: #333333;
$text-secondary: #666666;
$border-color: #f0f0f0;

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #ffffff;
  border-bottom: 1rpx solid $border-color;

  .location {
    display: flex;
    align-items: center;
    padding: 10rpx 20rpx;
    background: $primary-light;
    border-radius: 28rpx;
    margin-right: 20rpx;

    .location-icon {
      width: 28rpx;
      height: 28rpx;
      margin-right: 8rpx;
    }

    text {
      font-size: 28rpx;
      color: $primary-color;
    }

    .arrow {
      font-size: 20rpx;
      margin-left: 6rpx;
      color: $primary-color;
      transition: transform 0.3s;
    }

    &:active .arrow {
      transform: rotate(180deg);
    }
  }

  .search-bar {
    flex: 1;

    .search-input {
      display: flex;
      align-items: center;
      height: 72rpx;
      background: #f8f8f8;
      border-radius: 36rpx;
      padding: 0 30rpx;

      .search-icon {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
        opacity: 0.6;
      }

      .placeholder {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

.banner-container {
  margin: 20rpx 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  //border: 1rpx solid $border-color;

  .banner {
    height: 300rpx;

    .banner-image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}

.services-container {
  margin: 20rpx 30rpx;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  border: 1rpx solid $border-color;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30rpx;

  .service-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.5s ease-out forwards;
    opacity: 0;

    .icon-wrapper {
      width: 100rpx;
      height: 100rpx;
      background: $primary-light;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12rpx;
      transition: transform 0.3s;

      image {
        width: 60rpx;
        height: 60rpx;
      }
    }

    text {
      font-size: 24rpx;
      color: $text-color;
    }

    &:active .icon-wrapper {
      transform: scale(0.95);
      background: darken($primary-light, 5%);
    }
  }
}

.recommend-section {
  margin: 20rpx 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;

  .tab-content {
    padding: 20rpx;
  }
}

.recommend-tabs {
  background: #ffffff;
  border-bottom: 1rpx solid #eee;

  .scroll-tabs {
    white-space: nowrap;
    padding: 0 20rpx;
    height: 88rpx;

    .tab-item {
      display: inline-block;
      padding: 0 30rpx;
      line-height: 84rpx;
      font-size: 28rpx;
      color: #666;
      position: relative;

      &.active {
        color: #333;
        font-weight: 500;

        &::after {
          content: '';
          position: absolute;
          left: 30rpx;
          right: 30rpx;
          bottom: 0;
          height: 4rpx;
          background: $primary-color;
          border-radius: 2rpx;
        }
      }
    }
  }
}

.house-list {
  padding: 20rpx;

  .notice-bar {
    font-size: 26rpx;
    color: #999;
    padding: 20rpx 0;
  }

  .house-item {
    margin-bottom: 30rpx;
    background: #ffffff;

    .house-image-wrapper {
      position: relative;
      width: 100%;
      height: 400rpx;

      .house-image {
        width: 100%;
        height: 100%;
        display: block;
      }

      .location-tag {
        position: absolute;
        left: 20rpx;
        bottom: 20rpx;
        display: flex;
        align-items: center;
        background: rgba(0, 0, 0, 0.5);
        padding: 4rpx 12rpx;
        border-radius: 4rpx;

        .location-icon {
          width: 24rpx;
          height: 24rpx;
          margin-right: 4rpx;
        }

        text {
          color: #ffffff;
          font-size: 24rpx;
        }
      }
    }

    .house-info {
      padding: 20rpx;

      .tag-row {
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .hot-tag {
          background: #ff5555;
          color: #ffffff;
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          margin-right: 12rpx;
        }

        .title {
          flex: 1;
          font-size: 32rpx;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .house-attrs {
        margin-bottom: 16rpx;

        text {
          font-size: 26rpx;
          color: #666;
        }
      }

      .price-row {
        display: flex;
        align-items: baseline;
        margin-bottom: 12rpx;

        .total-price {
          .number {
            font-size: 36rpx;
            font-weight: 600;
            color: #ff5555;
          }

          .unit {
            font-size: 24rpx;
            color: #ff5555;
            margin-left: 4rpx;
          }
        }

        .unit-price {
          font-size: 24rpx;
          color: #999;
          margin-left: 20rpx;
        }
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12rpx;

        .tag {
          font-size: 24rpx;
          color: #666;
          background: #f5f5f5;
          padding: 4rpx 12rpx;
          margin-right: 12rpx;
          margin-bottom: 8rpx;
        }
      }

      .rank-info {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #ffffff;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1rpx solid $border-color;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;

    &:active {
      transform: scale(0.9);
    }

    image {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 6rpx;
    }

    text {
      font-size: 24rpx;
      color: $text-secondary;
    }

    &.active {
      text {
        color: $primary-color;
      }
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
